<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="我的卡项" :autoBack="true" :placeholder="true" />
		<block v-if="list.length">
			<u-list>
				<u-list-item>
					<view
						class="card-list-item" 
						:style="{backgroundColor:item.bgColor}"
						v-for="(item, key) in list" 
						:key="key" 
						@click="$u.route('/pages/cardbuy/cardbuyDetails/cardbuyDetails',{id: item.id, type: 2, storeId: item.storeId})">
						<view class="tx">
							<view class="name">{{item.cardItemName}}</view>
							<view class="coreshop-font-xs">含{{item.projectCount}}种项目·共{{item.quantityAll}}次·剩余{{item.quantity}}次</view>
							<view class="coreshop-font-xs">使用门店·{{item.storeName}}</view>
							<view class="c-m-t-30 coreshop-flex coreshop-justify-between coreshop-align-center">
								<text class="coreshop-font-sm">{{item.validityDate.substring(0,11)}}到期</text>
								<view class="coreshop-font-xs coreshop-padding-4 coreshop-btn-wws">立即使用</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- <u-swipe-action>
				<u-swipe-action-item :index="index" :name="index" v-for="(item, index) in list" :key="item.id"
					@click="onClick" :options="options">
					<view class="list-item">
						<view class="title">{{item.cardItemName}}</view>
						<view class="dsc">项目名称：{{item.projectName}}</view>
						<view class="dsc">客户名称：{{item.userName}}</view>
						<view class="dsc">客户电话：{{item.userPhone}}</view>
						<view class="dsc">卡项数量：{{item.quantity}}</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action> -->
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20"
				margin-bottom="20" />
		</block>
		<!-- 无数据时默认显示 -->
		<view class="coreshop-emptybox" v-else>
			<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/collect.png'" icon-size="150" text="数据为空"
				mode="list"></u-empty>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '查看详情',
						style: {
							backgroundColor: '#71d5a1'
						}
					},
					{
						text: '取消预约',
						style: {
							backgroundColor: '#f9ae3d'
						}
					}
				],
				page: 1,
				limit: 10,
				list: [], // 预约列表
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onLoad() {
			this.GetCardItemBalance()
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.GetCardItemBalance()
			}
		},
		methods: {
			GetCardItemBalance() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.status = 'loading '
				this.$u.api.GetCardItemBalance(data).then(res => {
					if (res.code===0) {
						let _list = res.data;
						_list.forEach(item => {
							item.show = false;
						})
						this.list = [...this.list, ..._list]

						if (res.data.count > this.list.length) {
							this.page++
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 操作处理
			// onClick(e) {
			// 	let that = this;
			// 	let appointmentId = this.list[e.name].id;
			// 	if(e.index === 0){
			// 		this.$u.route('/pages/member/reservation/detail/index', { ...this.list[e.name] });
			// 	}else {
			// 		this.$u.api.CancelAppointment({id:appointmentId}).then(res=>{
			// 			that.$u.toast(res.msg)
			// 			that.list = []
			// 			that.getAppointmentList()
			// 		})
			// 	}
			// },
		}
	};
</script>


<style lang="scss" scoped>
	.card-list-item{
		width: 690rpx;
		margin: auto;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		min-height: 240rpx;
		background-color: #323434;
		background-image: url('../../../static/images/my/card.png');
		background-size: 50% 50%;
		background-repeat: no-repeat;
		background-position: center left;
		position: relative;
		.tx{
			color:#fff;
			line-height: 1.45;
		}
	}
</style>
